<html>
<head>
    <title>Tree list dev</title>
<script type="text/javascript" src="../jquery/jquery.js">
</script>
<style>
#treelist {
  border: 1px solid gray;
  float:left;
}

.treelist-header {
  cursor: default;
  float: left;
  clear: left;
  background-color: silver;
}

.treelist-header-row {
}

.treelist-header-cell {
  border: 1px solid white;
  float: left;
  overflow: hidden;
}

.treelist-body {
  cursor: default;
  float: left;
  clear: left;
}

.treelist-row {
  float:left;
  clear: left;
}

.treelist-cell {
  float: left;
  overflow: hidden;
}

.treelist-row-highlight {
  background-color: #e0e0ff;
}

.treelist-node-indent {
  margin-left: 16px;
}

.collapse-icon {
  background-image: url(./treelist/tree_minus.gif);
}

.expand-icon {
  background-image: url(./treelist/tree_plus.gif);
}
</style>

<script type="text/javascript">
function adjustCellWidths() {
  var cols = [];
  $(".treelist-header-row .treelist-header-cell").each(function() {
    cols.push({
      width: $(this).width()
    });
  });

  $(".treelist-row").each(function() {
    var i = 0;
    $(this).children(".treelist-cell").each(function() {
      var col = cols[i];
      if (col && col.width) {
	$(this).width(col.width);
      }
      i ++;
    });
  });
}

function init() {
  adjustCellWidths();

  $(".treelist-row").mouseover(function() {
    $(this).addClass("treelist-row-highlight");
  }).mouseout(function() {
    $(this).removeClass("treelist-row-highlight");
  });

  $(".treelist-row").each(function() {
    $(this).children(".treelist-cell:first").prepend(
      "<img src='treelist/blank.gif' width='16'/>"
    );
  });

  function prependImages(masters) {
    masters.children(".treelist-row").each(function() {
      var children = masters.children(".treelist-master-row");
      prependImages(children);
      $(this).children(".treelist-cell:first").prepend(
	"<img src='treelist/blank.gif' width='16'/>"
      );
      masters.found = true;
    });
  }

  prependImages($(".treelist-master-row:first"));
}

$(init);
</script>
</head>

<body>
<div id="treelist">

<div id="tlhdr" class="treelist-header">
  <div class="treelist-header-row">
    <div class="treelist-header-cell" style="width:320px;">
      I am a treelist.
    </div>
    <div class="treelist-header-cell" style="width:120px;">
      Size
    </div>
    <div class="treelist-header-cell" style="width:160px;">
      Code
    </div>
  </div>
</div>

<div id="tlbody" class="treelist-body">

<div class="treelist-master-row">
<div class="treelist-row">
  <div class="treelist-cell">
    White list 01
  </div>
  <div class="treelist-cell">
    100
  </div>
  <div class="treelist-cell">
    wh01
  </div>
</div>

<div class="treelist-master-row">
  <div class="treelist-row">
    <div class="treelist-cell">
      White list 02
    </div>
    <div class="treelist-cell">
      100
    </div>
    <div class="treelist-cell">
      wh02
    </div>
  </div>

  <div class="treelist-row">
    <div class="treelist-cell">
      White list 0201
    </div>
    <div class="treelist-cell">
      200
    </div>
    <div class="treelist-cell">
      wh0201
    </div>
  </div>

  <div class="treelist-master-row">
    <div class="treelist-row">
      <div class="treelist-cell">
	White list 0202
      </div>
      <div class="treelist-cell">
	20
      </div>
      <div class="treelist-cell">
	wh0202
      </div>
    </div>

    <div class="treelist-row">
      <div class="treelist-cell">
	White list 020201
      </div>
      <div class="treelist-cell">
	100
      </div>
      <div class="treelist-cell">
	wh020201
      </div>
    </div>

    <div class="treelist-row">
      <div class="treelist-cell">
	White list 020202
      </div>
      <div class="treelist-cell">
	1009
      </div>
      <div class="treelist-cell">
	wh020202
      </div>
    </div>
  </div>
</div>
</div>

</div>

</div>
</body>
</html>